import React, {useState} from 'react'

import My_modal from './components/My_modal';
function App() {

  const [data,setData] = useState ([])
  const [value,setValue] = useState("")
  const [count,setCount] = useState(0)
  const [obj,setObj] = useState("")
  //控制弹框是否显示  如果为ture 弹框显示 为false 弹框关闭
  const [flag, setflag] = useState(false);

  //把input框输入的值添加到 数据里面
  const add_data = () =>{
    console.log(111,value);
    let newData = [...data]
    newData.push(value)
    setData(newData)
    setValue("")
  }
  //删除
  const del_data = (index) =>{
    console.log(index);
    let newData = [...data]
    newData.splice(index,1)
    setData(newData)
  }
 
  //点击button按钮 打开弹框
  const showModal = (item,index) => {
    setObj(item)
    setCount(index)
    setflag(true);
  };

  // 点击弹框中确认按钮执行的函数
  const handleOk = () => {
    setflag(false);
  };

  // 点击弹框中取消按钮 和 X 执行的函数
  const handleCancel = () => {
    setflag(false);
    // Object.assign()
  };

  //点击修改修改data中数据
  const setDataValue = (val) =>{
    let newData = [...data]
    newData[count] = val
    setData(newData)
  }

  let my_modal = {
    flag,
    handleCancel,
    handleOk,
    obj,
    setDataValue
  }

  return (
    <div>
      <input type="text" value={value} onChange={(e)=>setValue(e.target.value)} /> 
      <button onClick={add_data}>添加</button>
      <br/>
      {
        data&&data.length>0?data.map((item,index)=>{
          return <p key={index}>
              {item}
              <button onClick={()=>showModal(item,index)}>编辑</button>
              <button onClick={()=>del_data(index)}>删除</button>
            </p>
        }):"暂无数据"
      }
      <My_modal {...my_modal} />
      
    </div>
  )
}

export default App
